<template>
    <qf-table :columns="columns" :tableData="tableData" :tableLoading="tableLoading">
        <!-- 产品图片 -->
        <template v-slot:orderDetail[0].imageUrl="{ row }">
            <img :src="row.orderDetail[0].imageUrl" width="100" height="30" alt="">
        </template>
        <!-- 操作按钮 -->
        <template v-slot:action="{ row }">
            <el-button size="small"
                       type="primary"
                       :disabled="row.order_status === 4 || row.pay_status == 1" @click="pay(row)">去支付</el-button>
            <el-button size="small" type="danger" @click="delOrder(row)">删除</el-button>
        </template>
        <!-- 支付状态 -->
        <template v-slot:pay_status="{ row }">
            {{ row.pay_status === 0 ? "未支付" : "已支付" }}
        </template>
        <!-- 订单状态 -->
        <template v-slot:order_status="{ row }">
            {{ orderStatus(row) }}
        </template>
    </qf-table>
</template>
<script setup>
import * as api from "@/api/pay"
import qfTable from "@/components/qfTable/index.vue"
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue"
import { useRouter } from "vue-router"
let router = useRouter()
//定义表格的列
let columns = ref([
    {
        label: "产品图片",
        prop: "orderDetail[0].imageUrl"
    },
    {
        label: '订单编号',
        prop: "order_id"
    },
    {
        label: "产品名称",
        prop: "orderDetail[0].productName"
    },
    {
        label: "数量",
        prop: "orderDetail[0].quantity",
        width: "70px"
    },
    {
        label: "总价格",
        prop: 'total_fee'
    },
    {
        label: '创建时间',
        prop: 'create_time',
        width: "250px"
    },
    {
        label: "支付状态",
        prop: 'pay_status'
    },
    {
        label: "订单状态",
        prop: "order_status"
    },
    {
        label: "操作",
        prop: "action"
    }
])

//表格数据
let tableData = ref([])

//请求数据

//声明loading加载动画
let tableLoading = ref(false)

let getList = async () => {
    tableLoading.value = true;
    try {
        let res = await api.getOrderApi();
        console.log(res)
        tableData.value = res.data.data
        tableLoading.value = false;
    } catch (e) {
        console.log(e)
        tableLoading.value = false
    }
}

getList()

//订单状态
// 订单状态:0未提交 1提交成功 2已经取消 3无效订单 4.交易关闭 5退货

let orderStatus = (row) => {
    switch (row.order_status) {
        case 0:
            return '未提交'
        case 1:
            return '提交成功'
        case 2:
            return '已经取消'
        case 3:
            return '无效订单'
        case 4:
            return '交易关闭'
        case 5:
            return '退货'
    }
}


//去支付

let pay = (row) => {
    // console.log(row)
    //跳转到支付页面,通过query携带当前的order_id
    router.push('/pay/payment?order_id=' + row.order_id)
}

//删除订单

let delOrder = async (row) => {
    ElMessageBox.confirm('此操作将永久删除 ' + row.order_id + ', 是否继续?', '删除提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',

        })
        .then(async () => {
            //2.发请求,删除数据
            try {
                let res = await api.delOrderApi(row.order_id)
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                })
                getList()
            } catch (e) {
                ElMessage({
                    type: 'error',
                    message: e.toString()
                })
            }
        })
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '已取消删除'
            })
        })

}


</script>
<script>
export default {
    meta: {
        title: 'order',
        name: '订单管理',
        routeName: "order",
        icon: "icon-dd"
    }
}
</script>